<ux-title>Table spec - Reordering</ux-title>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<ux-layout layout="/table-spec/sidebar.html">
    <ux-block name="main" class="ux-section ux-800">
    	<div class="ux-data-table" ng-controller="UxDataTableCtrl" ng-init="sort='Clicks';reverse = true">
			<div class="ux-data-table-toolbar">
		        <button ng-disabled="toolbarDisabled" class="kd-button" id='show_reorder_dialog'>Reorder rows</button>
		        <button ng-disabled="toolbarDisabled" class="kd-button" disabled="disabled">Example 2</button>
		        <form class="filter ng-pristine ng-valid">
		          <label class="ui-helper-hidden-accessible" for="s">Filter Table: </label><input id="s" ng-model="search.$" placeholder="filter table by foo" class="ng-pristine ng-valid">
		        </form>
		    </div>
			<table ng-controller="TableCtrl">
			 <colgroup></colgroup>
			 <colgroup ng-repeat="item in data.table_ad_scheduling.headers" ng-class="{active: $parent.sort==item.id}">
			 </colgroup>
			 <thead>
			   <tr>
			     <th>
			       <label class="ui-helper-hidden-accessible" for="select-all">Select all</label>
			       <input id="select-all" type="checkbox" >
			     </th>
			     <th
			       ng-repeat="item in data.table_ad_scheduling.headers"
			       ng-class="{sorted: $parent.sort==item.id, reverse: $parent.reverse==true}"
			       >
			         {{item.title}}
			         <a class="help" href="#help"></a>
			         <button class="sort" ng-click="$parent.sort = item.id; $parent.reverse=!$parent.reverse">sort</button>
			     </th>
			   </tr>
			 </thead>
				<tbody>
				   <tr ng-repeat="row in rows | orderBy:sort:reverse" ng-init='updateId(row, $index)'>
				     <td><label><span class="ui-helper-hidden-accessible">select row</span><input type="checkbox"></label></td>
				     <td class="main"><a href="/bla">{{row.Campaign}}{{name}}</a></td>
				     <td>{{row.DayAndTime}}</td>
				     <td>{{row.BidAdj}}</td>
				     <td>{{row.Clicks}}</td>
				     <td>{{row.Impr}}</td>
				     <td>{{row.CTRAvg}}</td>
				     <td>{{row.CPC}}</td>
				     <td>{{row.Cost}}</td>
				     <td>{{row.AvgPos}}</td>
				     <td>{{row.Conv}}</td>
				     <td>{{row.CostConv}}</td>
				     <td>{{row.ConvRate}}</td>
				     <td>{{row.ViewThroughConv}}</td>
					</tr>
				</tbody>
				<tfoot>
				</tfoot>
			</table>
			<ux-modal-dialog trigger="show_reorder_dialog">
			    <h1>Reorder rows</h1>		    	   		
		    	<ul class='sortable'>	 
		   			<li ng-repeat="item in rows | orderBy:'testid.id'" ><input type='text' placeholder='{{item.testid.id}}' ng-blur='updateId(item,id)' ng-model='id'><span>{{ item.Campaign }}++{{item.testid.id}}</span> </li>
		   		</ul>
			   
			    <div class="kd-formbuttons">
			      <ux-button submit class="close_dialog">Apply</ux-button>
			      <ux-button class="close_dialog">Cancel</ux-button>
			    </div>
			</ux-modal-dialog>	
		</div>
		

		
    </ux-block>
    <ux-block>

	</ux-block>
</ux-layout>
